<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        canvas {
            border: 1px solid red;
        }
    </style>
</head>
<body onload="draw()">

<div id="container">
    <canvas id="mycanvas" width="150" height="150">Your Browser does not support Canvas, please upgrade</canvas>
</div>

<script>
    // drawImage()方法的使用
    function draw() {
        const canvas = document.getElementById('mycanvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        // 使用drawImage()方法时要确保加载完成之前，再使用图片
        img.onload = function () {
            // 进行画图，默认是铺满整个画布
            ctx.drawImage(img, 0, 0);
            // 其实beginPath()和closePath()并没有关联，开始画路径
            ctx.beginPath();
            ctx.moveTo(30,96);
            ctx.lineTo(70,66);
            ctx.lineTo(103,76);
            ctx.lineTo(170,15);
            ctx.stroke();
        }
        // 这就是背景色
        img.src = "../images/circle.jpg";
    }
</script>
</body>
</html>